<template>
  <div class="home" :style="{ backgroundImage: 'url(' + coverImgUrl + ')' }">
    <div class="weather-box">
      <el-cascader
        size="medium"
        separator=">"
        :options="options"
        placeholder="请选择/搜索"
        v-model="selectedOptions"
        :props="{ expandTrigger: 'hover' }"
        filterable
        @change="selectCity"
      />
      <div class="now-cond" v-if="Object.keys(weathData).length">
        <p class="address">
          <i class="el-icon-place" />{{ weathData.basic.city }}
        </p>
        <p class="upTime">{{ weathData.basic.update.loc }}</p>
        <i class="condTxt">{{ weathData.now.cond.txt }}</i>
        <p class="wind">{{ weathData.now.wind.dir }}</p>
        <p class="tmp">
          {{ weathData.daily_forecast[0].tmp.min }}℃~{{
            weathData.daily_forecast[0].tmp.max
          }}℃
        </p>
        <h1>未来3日天气预报</h1>
        <el-table
          :data="weathData.daily_forecast"
          border
          style="width: 100%"
          stripe
        >
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cond.txt_d" label="天气" />
          <el-table-column prop="tmp.min" label="最低温度(℃)" width="120" />
          <el-table-column prop="tmp.max" label="最高温度(℃)" width="120" />
          <el-table-column prop="wind.dir" label="风向" />
        </el-table>
      </div>

      <div class="tip" v-else>
        <h1>选择城市开始查询吧</h1>
      </div>
    </div>
  </div>
</template>

<script>
//城市选择
import { getCityWeather } from '@/api/home';
import axios from "axios"
// 三级联动
import { regionData, CodeToText } from "element-china-area-data"

export default {
  name: "HomeViews",
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      addressAll: [],
      address: "",
      weathData: {},
      coverImgUrl: require("@/assets/img/bg.jpg"),
    }
  },
  methods: {
    //选择地区
    selectCity(val) {
      this.addressAll = []
      console.log(CodeToText[val[0]])
      console.log(CodeToText[val[1]])
        console.log(CodeToText[val[2]])
      this.selectedOptions.forEach((city) => {
        this.addressAll.push(CodeToText[city])
      })
      // this.inquireWeather()
      this.WeatherReport()
    },
    // 点击天气查询
    async WeatherReport() {
      if (this.addressAll[2] == "市辖区" || this.addressAll.length == 2) {
        this.address = this.addressAll[1] //如果选市辖区就定位到二级地址
      } else {
        this.address = this.addressAll[2] //区域码所对应的属性值即中文地址
      }
      // 开始请求接口
      // const res1 = await this.$api.getCityWeather(this.address);
      const res= await axios.get(
        "https://bird.ioliu.cn/weather?city=" + `${this.address}`,
        // {
        //   params: {
        //     citiy: this.address,
        //   },
        // }
      )
      const res1 = await getCityWeather(this.address)
      console.log(res1,'res1')
      console.log('res.data',res.data) 
      if (res.data.status === "ok") {
        //请求数据成功
        this.$notify({
          title: "查询成功",
          type: "success",
        })
        this.weathData = res.data
        this.weathData.daily_forecast.shift()
        this.weathData.daily_forecast.splice(3, 3)
        //无法找到该地
      } else if (res.data.status === "unknown location") {
        
      }
      // 背景图片切换
      this.bgChange()
    },
    // 背景图片切换
    bgChange() {
      const weather = this.weathData.now.cond.txt
      this.coverImgUrl = require(`@/assets/img/${weather}.jpg`)
    },
  },
}
</script>

<style lang="less" scoped>


// Color variables (appears count calculates by raw css)
@color0: #ffffff; // Appears 5 times
@color1: #000000; // Appears 4 times
@color2: #9095d8; // Appears 3 times



.home {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	position: relative;
	.weather-box {
		bottom: "";
		left: 50%;
		position: absolute;
		right: "";
		text-align: center;
		top: 5%;
		transform: translateX(-50%);
		z-index: 999;
		.now-cond {
			h1 {
				color: @color0;
				font-size: 20px;
				font-weight: bold;
			}
			.address {
				color: @color0;
				font-size: 20px;
				font-weight: bold;
				text-shadow: 5px 5px 5px @color1;
			}
			.upTime {
				color: @color0;
				font-size: 20px;
				font-weight: bold;
				text-shadow: 5px 5px 5px @color1;
			}
			.condTxt {
				color: @color0;
				font-size: 80px;
				font-weight: bolder;
				text-shadow: 5px 5px 5px #cccccc;
			}
			.wind {
				color: @color1;
				font-size: 20px;
				font-weight: bolder;
				text-shadow: 2px 2px 5px @color2;
			}
			.tmp {
				color: @color1;
				font-size: 20px;
				font-weight: bolder;
				text-shadow: 2px 2px 5px @color2;
			}
		}
		.tip {
			h1 {
				color: @color0;
				font-size: 50px;
				font-weight: bolder;
				text-shadow: 2px 2px 5px @color2;
			}
		}
	}
}
    
  
</style>
